<template>
  <div class="top" id="top">
    <!--头部bar-->
    <div class="top-bar">
      <div class="w1230 top-main">
        <RouterLink to="/">
          <i class="fa fa-shopping-cart"></i>爱购网首页
        </RouterLink>
        <div class="account">
          <span>{{ loginUser.userName }}<i class="fa fa-caret-down"></i></span>
          <div class="manage">
            <ul>
              <li><a href="/deliverAddress">收货地址</a></li>
              <li><a href="/shoppingCart">我的购物车</a></li>
              <li><a href="/order">我的订单</a></li>
              <li><a v-if="loginUser!=null" href="" @click="logout">退出</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="w1230">
    <img src="../assets/img/logo.png" width="100" height="40" class="logo"/>
    <span class="cart">我的订单</span>
  </div>
<!--  <div class="search-bar">-->
<!--    <input type="text" v-model="searchQuery.productName" placeholder="根据商品搜索订单..." />-->
<!--    <button @click="onSearch">搜索</button>-->
<!--  </div>-->
  <!--订单列表-->
  <div class="w1230 trade">
    <!--标题栏-->
    <div class="trade-title">
      <ul class="clear-float">
        <li class="info">宝贝</li>
        <li class="price">单价</li>
        <li class="num">数量</li>
        <li class="real-price-title">实付款</li>
        <li class="operate">交易操作</li>
      </ul>
    </div>
    <!--详细展示-->
    <div class="trade-list">
      <div v-for="orders in orderList">
        <div class="trade-list-top clear-float">
          <div class="trade-list-l" >
            <span class="trade-date">{{ orders.createTime }}</span>
            <span class="trade-no">订单号:{{orders.orderId}}</span>
          </div>
          <a @click="handleDelete(orders.orderId)"><i class="fa fa-trash trade-list-r"></i></a>
        </div>
        <div>
          <ul class="clear-float" >
            <li class="info">
              <img :src="orders.productImage" />
              <p>{{ orders.productName }}</p>
            </li>
            <li class="price">{{ orders.price.toFixed(2) }}</li>
            <li class="num">{{orders.productNum}}</li>
            <li class="real-price">{{orders.totalPrice}}</li>
            <li class="operate"><a @click="goToProductDetail(orders.productId)">再次购买</a></li>
          </ul>
<!--          <ul class="clear-float">-->
<!--            <li class="info">-->
<!--              <img src="../assets/img/mod01.jpg" />-->
<!--              <p> 日本正品代购 资生堂心机2014年新款 润彩唇膏/口红 保湿滋润持久</p>-->
<!--            </li>-->
<!--            <li class="price">{{orders.price}}</li>-->
<!--            <li class="num">{{orders.productNum}}</li>-->
<!--            <li class="real-price">￥198.00</li>-->
<!--            <li class="operate"><a href="#">再次购买</a></li>-->
<!--          </ul>-->
        </div>
      </div>
<!--      <div>-->
<!--        <div class="trade-list-top clear-float">-->
<!--          <div class="trade-list-l">-->
<!--            <span class="trade-date">2018-10-09</span>-->
<!--            <span class="trade-no">订单号:23959345783458275</span>-->
<!--          </div>-->
<!--          <a href="#"><i class="fa fa-trash trade-list-r"></i></a>-->
<!--        </div>-->
<!--        <div>-->
<!--          <ul class="clear-float">-->
<!--            <li class="info">-->
<!--              <img src="../assets/img/cloth01.jpg" />-->
<!--              <p>2018秋冬新款女装减龄慵懒风V领毛衣女宽松套头显瘦长袖针织衫潮</p>-->
<!--            </li>-->
<!--            <li class="price">￥300.00</li>-->
<!--            <li class="num">1</li>-->
<!--            <li class="real-price">￥300.00</li>-->
<!--            <li class="operate"><a href="#">再次购买</a></li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div>-->
<!--        <div class="trade-list-top clear-float">-->
<!--          <div class="trade-list-l">-->
<!--            <span class="trade-date">2018-10-09</span>-->
<!--            <span class="trade-no">订单号:23959345783458275</span>-->
<!--          </div>-->
<!--          <a href="#"><i class="fa fa-trash trade-list-r"></i></a>-->
<!--        </div>-->
<!--        <div>-->
<!--          <ul class="clear-float">-->
<!--            <li class="info">-->
<!--              <img src="../assets/img/mod01.jpg" />-->
<!--              <p> 日本正品代购 资生堂心机2014年新款 润彩唇膏/口红 保湿滋润持久</p>-->
<!--            </li>-->
<!--            <li class="price">￥198.00</li>-->
<!--            <li class="num">1</li>-->
<!--            <li class="real-price">￥198.00</li>-->
<!--            <li class="operate"><a href="#">再次购买</a></li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
  <el-pagination style="justify-content: center;margin-top: 10px"
                 background
                 layout="prev, pager,next"
                 :page-size=pageSize
                 :total=total
                 @current-change="toPage"
                 @prev-click="toPage"
                 @next-click="toPage"
  />
  <!--脚注-->
  <div class="footer">
    <p class="w1230">
      <a href="#">关于爱购</a>
      <a href="#">合作伙伴</a>
      <a href="#">营销中心</a>
      <a href="#">廉正举报</a>
      <a href="#">联系客服</a>
      <a href="#">开发平台</a>
      <a href="#">诚征英才</a>
      <a href="#">联系我们</a>
      <a href="#">网站地图</a>
      <a href="#">知识产权</a><span>|</span>
      <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
  </div>
  <div :class="{ 'horizontal-list': isSearchMode }" class="clear-float">
    <!-- 搜索模式下显示搜索结果 -->
    <li v-for="product in searchResults" :key="product.id">
      <img :src="product.productImage" :alt="product.productName">
      <p>{{ product.productName }}</p>
      <span>￥{{ product.price }}</span>
    </li>
  </div>

</template>
<script >
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "OrderView",
  data() {
    return {
      loginUser: {},
      product:{},
      orderList:[],
      total: 0,
      pageSize: 3,
      searchQuery:{},
      searchResults:[],
      isEmptySearchResult: false,
      isSearchMode: false,
    }
  },

  mounted() {
    this.loginUser = JSON.parse(localStorage.getItem("user"))
    console.log(this.loginUser)
    if (this.loginUser && this.loginUser.userId) {
      this.selectUserId(this.loginUser.userId)
    }



  },
  methods: {
    toPage(current) {
      // 使用组件的 loginUser.userId
      if (this.loginUser && this.loginUser.userId) {
        this.selectUserId(this.loginUser.userId, current);
      } else {
        console.error('User ID is not available for pagination.');
      }
    },
    logout() {
      this.loginUser = null
      localStorage.removeItem("user");
      this.$router.push("/");
    },

    loadorderList(current = 1, userId) {
      // const url = "/user/order/select/" + userId;
      const params = {
        current: current,
        productName: this.searchQuery.productName
      };

      doGet("/user/order/select/" + userId, params).then((resp) => {
        if (resp.data.code === 200) {
          this.searchResults = resp.data.data.list;
          if (this.searchResults.length === 0) {
            // 设置标志位，指示搜索结果为空
            messageTip('没有找到该商品', 'error');
            this.isEmptySearchResult = true;
          } else {
            // 有搜索结果，重置标志位
            this.isEmptySearchResult = false;
          }
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      });
    },
    onSearch() {
      if (this.searchQuery.productName.trim() === '') {
        // 可以显示一个消息提示用户搜索框不能为空
        console.log('搜索框不能为空');
        // 或者使用Element UI的Message组件来提示用户
        messageTip(
            '搜索框不能为空',
            'error'
        );
      } else {
        this.loadorderList(1);
        this.isSearchMode = true;
      }
    },
    goToProductDetail(productId){
      const productDetailUrl = `/GoodsDetail/${productId}`;
      this.$router.push(productDetailUrl);
    },
    selectUserId(userId,current = 1) {
      doGet("/user/order/" + userId +"?current=" + current).then((resp) => {
        if (resp.data.code === 200) {
          this.orderList = resp.data.data.list
          this.pageSize = resp.data.data.pageSize
          this.total = resp.data.data.total
          console.log("order",this.orderList);
        } else {
          // 处理错误情况，例如显示错误消息
          console.error("Failed to fetch receiving addresses:", resp.data.message);
        }
      }).catch((error) => {
        // 处理网络错误或其他请求错误
        console.error("Error fetching receiving addresses:", error);
      });
    },
    handleDelete(orderId){
      messageConfirm("是否删除订单及相关信息？").then(() => {
        doDelete("/user/orderproduct/" + orderId).then((resp) => {
          if (resp.data.code === 200) {
            messageTip("删除成功!", "success");
            this.selectUserId(this.loginUser.userId);
          }
        });
      });
    },

  }
}
</script>
<style scoped>
@import '../assets/css/reset.css';
@import '../assets/css/top.css';
@import '../assets/css/buyerTrade.css';
@import '../assets/css/footer.css';
@import '../assets/css/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css';
.search-bar {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 5px;
  padding: 5px;
  width: 300px;
  margin: auto;
  transform: translateX(-100px);
}

.search-bar input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 5px;
  background-color: transparent;
  font-size: 16px;
}

.search-bar button {
  border: none;
  background-color: #007bff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.search-bar button:hover {
  background-color: #0056b3;
}
</style>
